<template>
	<div class="title">
		客服设置
	</div>
	<el-form class="mt-4 w-[420px]" label-width="90px">
		<el-card class="content mb-4" shadow="never">
            <el-form-item label="客服标题：">
                <el-input v-model="formData.title" placeholder="请输入客服标题" />
            </el-form-item>
            <el-form-item label="服务时间：">
                <el-input v-model="formData.date_time" placeholder="请输入服务时间" />
            </el-form-item>
            <el-form-item label="联系电话：">
                <el-input v-model="formData.mobile" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="联系QQ：">
                <el-input v-model="formData.qq" placeholder="请输入联系QQ" />
            </el-form-item>
            <el-form-item label="二维码：">
                <imageUpload v-model="formData.qr_code" promptText="建议尺寸：400*400" :limit="1" />
            </el-form-item>
		</el-card>
	</el-form>
</template>

<script lang="ts" setup name="diyService">
import { reactive, onMounted, watch } from 'vue';
import { diyGetServicePage } from '/@/api/diy';

const formData = reactive({
    title: '',
    date_time: '',
    mobile: '',
    qq: '',
    qr_code: ''
});

const emit = defineEmits(['getData']);

const getData = async () => {
	const data = await diyGetServicePage({ type: 1 });
	if (data.data) {
		for (const key in formData) {
			if (data.data[key] != null && data.data[key] != undefined) {
				formData[key] = data.data[key];
			}
		}
	}
    emit('getData', formData);
};

watch(
	formData,
	() => {
        emit('getData', formData);
	},
	{ immediate: true }
);

onMounted(() => {
	getData();
});

defineExpose({
    getData
});
</script>
<style lang="scss" scoped>
</style>
